<template>
  <div class="main">
    <div
      v-bind:class="{
        isMobile: mobileFlag,
        notMobile: !mobileFlag,
        containers: !mobileFlag,
        mobileContainers: mobileFlag,
      }"
    >
      <div class="main-top">
        <div  style="width: 30%; color: #6c848e;font-size: 0.8em; margin-left:5%">
          <div>截 止 时 间 :</div>
          <div v-if="this.endTime" style="color:#409eff">{{ this.endTime}}</div>
          <div v-if="!this.endTime"  style="color:#409eff">无限时</div>
        </div>
        <div style="flex: 1; text-align: center">
          <div
            style="
              margin-left: 15px;
              font-size: 1.2em;
              word-wrap: break-word;
              width: 60%;
              text-align: center;
            "
          >
            {{ this.title }}
          </div>
          <div
            style="
              width: 60%;
              word-wrap: break-word;
              margin-left: 15px;
              font-size: 0.8em;
              margin-top: 5px;
              color: #6c848e;
              text-align: center;
            "
          >
            {{ this.description }}
          </div>
        </div>

        <div>
          <div
            style="
              font-size: 2.5em;
              color: #409eff;
              width: 2em;
              font-style: italic;
              width: 150px;
              text-align: center;
            "
          >
            {{ this.totalScore }}
          </div>
          <!-- <div style="color:#409eff;width:2em;font-style: italic">==</div> -->
        </div>
      </div>
      <el-divider></el-divider>
      <el-card
        class="box-card"
        v-for="(question, index) in questionList"
        :key="index"
        style="margin-top: 10px"
      >
        <div style="display: flex; margin-left: 20px">
          <div style="color: #409eff; margin-bottom: 8px; font-size: 18px">
            <div v-if="question.questionType == 'radio'" style="width: 90px">
              {{ index + 1 + ". " + "单选题" }}
            </div>
            <div v-if="question.questionType == 'checkbox'" style="width: 90px">
              {{ index + 1 + ". " + "多选题" }}
            </div>
            <div v-if="question.questionType == 'judge'" style="width: 90px">
              {{ index + 1 + ". " + "判断题" }}
            </div>
            <div v-if="question.questionType == 'text'" style="width: 90px">
              {{ index + 1 + ". " + "填空题" }}
            </div>
            <div v-if="question.questionType == 'texts'" style="width: 90px">
              {{ index + 1 + ". " + "简答题" }}
            </div>
          </div>
          <div style="flex: 1"></div>
          <div style="color: #ffcd41; width: 120px; margin-right: 10%">
            {{ "（分值：" + question.score + "）" }}
          </div>
        </div>
        <div style="font-size: 15px; margin-left: 2em">
          {{ question.content }}
        </div>

        <!-- 单选题 -->
        <el-radio-group
          v-if="question.questionType == 'radio'"
          style="margin-left: 20px"
        >
          <!-- <span>{{ index + 1 + "." }}</span> -->
          <div v-for="(option, index) in question.choiceList" :key="index">
            <el-radio :label="option" style="margin-top: 10px; margin-left: 1em"
              >{{ question.choiceList[index].content }}
            </el-radio>
          </div>
        </el-radio-group>

        <!-- 多选题 -->
        <div
          v-if="question.questionType == 'checkbox'"
          style="margin-left: 20px"
        >
          <!-- <span>{{ index + 1 + "." }}</span> -->
          <div v-for="(option, index) in question.choiceList" :key="index">
            <el-checkbox
              :label="option"
              style="margin-top: 10px; margin-left: 1em"
              >{{ question.choiceList[index].content }}
            </el-checkbox>
          </div>
        </div>
        <!-- 判断题 -->
        <div
          v-if="question.questionType == 'judge'"
          style="margin-top: 10px; margin-left: 2em"
        >
          <el-radio-group>
            <el-radio :label="'正确'"> </el-radio>
            <el-radio :label="'错误'" style="margin-left: 10px"> </el-radio>
          </el-radio-group>
        </div>

        <!-- 填空题 -->
        <div
          v-if="question.questionType == 'text'"
          v-for="(text, index) in question.rowNum"
          :key="index"
          style="margin-left: 2em"
        >
          <el-input
            :disabled="true"
            placeholder="待填写者输入"
            style="margin-top: 10px"
          ></el-input>
        </div>

        <!-- 简答题 -->
        <div v-if="question.questionType == 'texts'" style="margin-left: 2em">
          <el-input
            type="textarea"
            :rows="question.rowNum"
            placeholder="待填写者输入"
            :disabled="true"
            style="margin-top: 10px"
          >
          </el-input>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: -1,
      info: null,
      mobileFlag: false,
      title: "标题",
      description: "描述",
      questionList: [],
      totalScore: "100",
      endTime:"",
    };
  },
  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    this.mobileFlag = flag;
    // this.questionList=sessionStorage.getItem('test');
    console.log(flag);
    console.log(this.mobileFlag);
    this.id = this.$route.query.id;
    const _this = this;

    axios
      .get(_this.APIurl.apiUrl.domainName + "examPaper/findById/" + _this.id)
      .then(function (response) {
        _this.title = response.data.data.title;
        _this.description = response.data.data.description;
        _this.questionList = response.data.data.questionList;
        _this.totalScore = response.data.data.score;
        _this.endTime=response.data.data.endTime;
        console.log(_this.questionList);
      });
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.main-top {
  display: flex;
}
.flexs {
  display: flex;
  justify-content: center;
}
.isMobile {
  width: 100%;
  padding: 0px;
}
.notMobile {
  width: 70%;
}
.containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 5%;
}
.mobile-containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 0px;
  margin-bottom: 2%;
}
/* .main :first-child  /deep/ .el-card__body{
    padding-left: 0px;
    padding-right: 0px;
} */
</style>